/*
 *
 * (c) Copyright Ascensio System Limited 2010-2023
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
*/


@import "../../../../skins/default/params.less";
/*******************************************************************************
    Page loader
*******************************************************************************/
/*.loader-page {
    background: url("images/loader_64.gif") no-repeat center center  transparent;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 50%;
    margin-top: -32px;
    margin-left: 100px;
    left: 50%;
   
}*/
.loader-page {
    width: 50px;
    height: 180px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
    margin-left: 75px;
    left: 50%;

    .text {
        display: inline-block;
        font-size: 14px;
        margin-left: 80px;
        margin-top: 125px;
        color: @loader-page-text-color;
        white-space: nowrap;
    }

    img {
        position: absolute;
        top: 102px;
        width: 64px;
        height: 64px;
    }
}
.romb {
    width: 40px;
    height: 40px;
    -ms-transform: rotate(135deg) skew(20deg, 20deg);
    -webkit-transform: rotate(135deg) skew(20deg, 20deg);
    -moz-transform: rotate(135deg) skew(20deg, 20deg);
    -o-transform: rotate(135deg) skew(20deg, 20deg);
    background: red;
    border-radius: 6px;
    animation: movedown 3s infinite ease;
    -moz-animation: movedown 3s infinite ease;
    -webkit-animation: movedown 3s infinite ease;
    -o-animation: movedown 3s infinite ease;
    -ms-animation: movedown 3s infinite ease;
    position: absolute;
}
    .romb.blue {
        background: @loader-romb-blue-col;
        z-index: 3;
        -webkit-animation-name: blue;
        -moz-animation-name: blue;
        -ms-animation-name: blue;
        -o-animation-name: blue;
        animation-name: blue;
    }
.romb.red {
    background: @loader-romb-red-col;
    z-index:1;
    -webkit-animation-name: red;
        -moz-animation-name: red;
        -ms-animation-name: red;
        -o-animation-name: red;
        animation-name: red;
}
    .romb.green {
        background: @loader-romb-green-col;
        z-index: 2;
        -webkit-animation-name: green;
        -moz-animation-name: green;
        -ms-animation-name: green;
        -o-animation-name: green;
        animation-name: green;
    }

@-webkit-keyframes red {
    0%   {top:120px; background: @loader-romb-red-col;}
    10%   {top:120px; background: @loader-romb-red-col10;}
    14%   { background: @body-color;  top:120px;}  
    15%   { background: @body-color;  top:0;}  
    20%  {background: @loader-romb-red-col20; }
    30%  {background: @loader-romb-red-col30;}
    40% { top:120px; }  
    100% { top:120px; background: @loader-romb-red-col;}    
}

@keyframes red {
   0%   {top:120px; background: @loader-romb-red-col;}
    10%   {top:120px; background: @loader-romb-red-col10;}
    14%   { background: @body-color;  top:120px;}  
    15%   { background: @body-color;  top:0;}  
    20%  {background: @loader-romb-red-col20; }
    30%  {background: @loader-romb-red-col30;}
    40% { top:120px; }  
    100% { top:120px; background: @loader-romb-red-col;}    
}



@-webkit-keyframes green {    
     0%   {top:110px; background: @loader-romb-green-col;opacity:1;}
    10%   {top:110px; background: @loader-romb-green-col10; opacity:1;}
    14%   { background: @body-color;  top:110px; opacity:1;} 
    15%   { background: @body-color;  top:0;opacity:1;}   
    20%   {background: @body-color; top:0; opacity:0;}
    25%  {background: @loader-romb-green-col25; top:0; opacity:1; }
    30%  {background:@loader-romb-green-col30; }
    70% { top:110px;}
    100% { top:110px; background: @loader-romb-green-col;}    
}

@keyframes green {
     0%   {top:110px; background: @loader-romb-green-col;opacity:1;}
    10%   {top:110px; background: @loader-romb-green-col10; opacity:1;}
    14%   { background: @body-color;  top:110px; opacity:1;} 
    15%   { background: @body-color;  top:0;opacity:1;}   
    20%   {background: @body-color; top:0; opacity:0;}
    25%  {background: @loader-romb-green-col25; top:0; opacity:1; }
    30%  {background:@loader-romb-green-col30; }
    70% { top:110px;}
    100% { top:110px; background: @loader-romb-green-col;}      
}
@-webkit-keyframes blue {
     0%   {top:100px; background: @loader-romb-blue-col;opacity:1;}
    10%   {top:100px; background: @loader-romb-blue-col10; opacity:1;}
    14%   { background: @body-color;  top:100px; opacity:1;} 
    15%   { background: @body-color;  top:0;opacity:1;}  
    20%   {background: @body-color; top:0; opacity:0;}
    25%  {background: @body-color; top:0; opacity:0;}
    45%  {background: @loader-romb-blue-col45; top:0;opacity:0,2;}
    100% { top:100px;background: @loader-romb-blue-col;}  
}

@keyframes blue {
     0%   {top:100px; background: @loader-romb-blue-col;opacity:1;}
    10%   {top:100px; background: @loader-romb-blue-col10; opacity:1;}
    14%   { background: @body-color;  top:100px; opacity:1;} 
    15%   { background: @body-color;  top:0;opacity:1;}  
    20%   {background: @body-color; top:0; opacity:0;}
    25%  {background: @body-color; top:0; opacity:0;}
    45%  {background: @loader-romb-blue-col45; top:0;opacity:0,2;}
    100% { top:100px;background: @loader-romb-blue-col;} 
}

.loader-page.static .romb {
    animation: none;
    -moz-animation: none;
    -webkit-animation: none;
    -o-animation: none;
    -ms-animation: none;
    -webkit-animation-name: none;
    -moz-animation-name: none;
    -ms-animation-name: none;
    -o-animation-name: none;
    animation-name: none;
}

.loader-page.static .romb.blue {
    top: 100px;
    background: @loader-romb-blue-col;
}

.loader-page.static .romb.red {
    top: 120px;
    background: @loader-romb-red-col;
}

.loader-page.static .romb.green {
    top: 110px;
    background: @loader-romb-green-col;
}